<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        -->
        <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        
		<meta charset="utf-8"/>

		<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-density,dpi=device-dpi">
		<title></title>
		<link rel="stylesheet" href="css/swiper.min.css"/>
		<link rel="stylesheet" href="css/font-awesome.min.css"/>
		<link rel="stylesheet" href="css/style.css"/>
		
    </head>


<body class="page-check-out  swiper-no-swiping">
<div class="page-check-out-swiper swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide fast swiper-slide-1">
            <h2>快速结算模式</h2>
            <div class="custom-price-wrap">
                <div type="number " id="custom-price" value="" placeholder="消费金额"/>
            </div>
        </div>
        <div class="mykb-box">
            <ul class="num-key clearfix">
                <li class="num">1</li>
                <li class="num">2</li>
                <li class="num">3</li>
                <li class="func del"><img src="./img/backspace.png"></li>
                <li class="func sure">确定<br>支付</li>
                <li class="num">4</li>
                <li class="num">5</li>
                <li class="num">6</li>
                <li class="num">7</li>
                <li class="num">8</li>
                <li class="num">9</li>
                <li class="func jump"><img src="./img/jump1.png"></li>
                <li class="num">0</li>
                <li class="num">.</li>
            </ul>
        </div>
    </div>
    <div class="swiper-slide swiper-slide-1">
        <h2 class="style-2">
            <div class="set"></div>
            选菜结算模式
        </h2>
        <div class="top">
            <div class="count">
                总份数
                <span>X 0份</span>
            </div>
            <div class="cost">
                总金额<span>￥0.00</span>
            </div>
        </div>
        <div class="mid">
            <div class="mid-swiper swiper-container">
                <div class="swiper-wrapper">

                    <div class="swiper-slide">
                        <div class="center">
                            <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
							 <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
							 <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
							 <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
							 <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
							 <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
							 <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
							 <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
							 <div class="col-sm-4" cost="3" goods_id='1'>
                                <div class="img-wrap">
                                    <img src="img/1.jpg"/>
                                </div>
                                <div class="product-title">
                                    玉米煎饼<br/>
                                    <small>￥</small>
                                    <strong>3.00</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a class="text jump2"><img src="img/jump2.png"></a>
                </li>
                <li>
                    <a class="mid-prv"><i class="fa fa-caret-left" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a class="mid-next"><i class="fa fa-caret-right" aria-hidden="true"></i></a>
                </li>
                <li>
                    <a class="text sure2">确认</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="swiper-slide swiper-slide-1">
        <div style="display: none;">
            <div id="outdiv">
                <video id="v" autoplay=""></video>
            </div>
            <canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>
        </div>
        <div class="half top-half">
            <div class="center">
                <div class="left">
                    <div class="strong">总金额</div>
                    <div class="small">总份数</div>
                </div>
                <div class="right">
                    <div class="strong">￥0.00</div>
                    <div class="small">X<span>0</span>份</div>
                </div>
                <p>出示微信支付宝<strong>付款二维码</strong><br>或刷卡支付</p>
                <img src="img/pay.png" class="pay-img">
            </div>
        </div>
        <div class="half">
            <div class="center">
                <div class="left">
                    <div class="strong">总金额</div>
                    <div class="small">总份数</div>
                </div>
                <div class="right">
                    <div class="strong">￥0.00</div>
                    <div class="small">X<span>0</span>份</div>
                </div>
                <div class="cancel">
                    取消
                </div>
            </div>
        </div>
    	<div class="qrcode-position">
    		<div class="qrcode-position-border-1">
    		</div>
    		<div class="qrcode-position-border-2">
    		</div>	
    		<div class="qrcode-position-border-3">
    		</div>	
    		<div class="qrcode-position-border-4">
    		</div>
    	</div>
    </div>
</div>
</div>
<div class="modal password" style="display: none;">
    <div class="modal-content">

        <input tyle="number" placeholder="密码">
        <button class="button-sure">确定</button>
        <button class="button-cancel">取消</button>
    </div>
</div>
<div class="modal set-modal" style="display: none;">
    <div class="modal-content">
        <input tyle="number" id="uuid" placeholder="设备ID" disabled="disabled">
		<input tyle="text" id="host" placeholder="接口地址">
        <select id="counter_number_select" placeholder="柜台号">
            <option value="" selected="selected" disabled="disabled">柜台号</option>
        </select>
        <select id="terminal_number_select" placeholder="终端号">
            <option value="" selected="selected" disabled="disabled">终端号</option>
        </select>
        <input tyle="number" id="loop" placeholder="刷新间隔">
        <button class="button-sure">确定</button>
        <button class="button-cancel">取消</button>
    </div>
    <input type="hidden" id="counter_number" value=""/>
    <input type="hidden" id="terminal_number" value=""/>
</div>
<div class="modal alert" style="display: none;">
    <div class="modal-content">
		支付成功
    </div>
</div>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/check-out.js"></script>
<script type="text/javascript" src="js/mykb.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</body>

</html>
